<template>
  <el-submenu
    v-if="item.children && item.children.length"
    :index="item.path"
    :popper-class="item.popperClass"
    :show-timeout="item.showTimeout"
    :hide-timeout="item.hideTimeout"
    :popper-append-to-body="item.popperAppendToBody"
  >
    <template slot="title">
      <i
        v-if="item.meta && item.meta.icon ? true : false"
        :class="item.meta ? item.meta.icon : item.meta"
      />
      <slot name="submenu" :row="item">
        <span slot="title">{{ item.name }}</span>
      </slot>
    </template>
    <al-menu-item
      v-for="j in item.children"
      :key="j.path"
      :item="j"
      :index="j.path"
    >
      <template v-slot:menuItem="i">
            <slot name="menuItem" :row="i.row">
              {{ i.row.name }}
            </slot>
          </template>
          <template v-slot:submenu="i">
             <slot name="submenu" :row="i.row">
              {{ i.row.name }}
            </slot>
          </template>
    </al-menu-item>
  </el-submenu>
  <div v-else class="menu-item-wrapper">
    <template>
      <el-menu-item
        :index="item.path"
        :disabled="item.disabled"
        :route="item.route"
      >
        <i
          v-if="item.meta && item.meta.icon ? true : false"
          :class="item.meta ? item.meta.icon : item.meta"
        />
        <slot name="menuItem" :row="item">
          <span slot="title">{{ item.name }}</span>
        </slot>
      </el-menu-item>
    </template>
  </div>
</template>

<script>
export default {
  name: "AlMenuItem",
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
};
</script>

<style scoped>
i {
  margin-right: 6px;
}
</style>
